<html>
<head>
	<wicket:head>
		<style>
			#attdWrapper{
				margin:10px 10px 20px;
			}
			
			#attnHist{
				vertical-align:middle;
				float:left;	
			}
			
			#attdTop{
				vertical-align:middle;
				float:right;
			}
			
			.attdth{
				 vertical-align:middle;
				 text-align:left;
				 padding: 5px 10px;
			}
			
			.attdtd{
				text-align:left;
			}
			
			.attdLow{
				border: solid #F00 2px;
				background-color: #FFC1C1;
			}
				
			.attdLst{
				text-transform:uppercase;
				letter-spacing:3px;
			}
			#attdBot{
				margin:10px;
				min-height:400px;
			}
			
			/*.hlcal{
				background-color:#000;
				color:#fff;
				border: 1px solid red;
			}*/
			/*.ui-datepicker-week-end .hlcal {background:#000000; border: 1px solid red;}
			.ui-datepicker-week-end .hlcal span {color:red;}*/
			.hlcal .ui-state-default {font-weight:bold; color: #00F; background:#FFFFFF;}
			.hlcal1 .ui-state-default {font-weight:bold; color: #F00; background:#0F9;}
			
			/*New Attendance Sheet*/
			.outerAttdn{
			/*border: 2px solid red;
			width: 200px;*/
			height:200px;
			overflow:auto;
			-webkit-box-shadow: 5px 5px 5px ;
			-moz-box-shadow: 5px 5px 5px ;
			box-shadow: 5px 5px 5px ; 
			/*-moz-border-radius: 4px;
			border-radius: 4px; */
		}
		
		.attdnTab{
			border-collapse:collapse;
			table-layout:fixed;
		
		}
		
		.attdnTab td{
			border: 1px solid #000;
			overflow:hidden;
		}
		
		.attdnRow{
			cursor:default;
		}
		
		.attdnDate{
			width:20px;
			text-align:center;
		}
		
		.attdnName{
			width:60px;
			overflow:hidden;
			text-align:left;
		}
		
		.attdnMark{
			width:20px;
			text-align:center;
		}
		
		.attdnA{
			background-color:#960;
			color:#FFF;
			font-weight:bold;
		}
		
		.attdnP{
			background-color:#0CF;
			color:#333;
			font-weight:normal;
		}
		
		.attdnDateV{
			width:20px;
			text-align:center;
		}
		
		.attdnNameV{
			width:80px;
			overflow:hidden;
		}
		
		.attdnV{
			background-color:#0CF;
			color:#333;
			font-weight:normal;
		}
		
		.attdnV:hover {
			background-color:#960;
			color:#FFF;
			font-weight:bold;
		}
		
		/* new attdn sheet ends */
			
		</style>
	</wicket:head>
</head>

<body>	
	<wicket:extend>
		<div wicket:id="testme">rara</div>
		<div class="inviteOuter">                        
                        	<div style="border-bottom:2px solid #DEDDEF; color:#606; padding: 5px 0px 0px 10px; width:600px;"><h2>Attendance Record</h2></div>
                            <div  class="clearfix">
                                <div id="attdWrapper" class="clearfix">
                                	<div id="attnHist">
                                    	<a wicket:id="hishisLink" href="#">Attendance History</a>
                                        <!-- attendance history starts -->
     <div wicket:id="hishis" style="z-index:10; position:absolute; margin-left:100px;margin-top:-10px;">
     <div class="outerAttdn">
   		<table class="attdnTab">
        	<tr title="regular" class="attdnRow attdnV">
            	<th style="text-align:center; font-weight:bold;" colspan="2"><a href="#">[&lt;]</a>&nbsp;&nbsp;Feb 2011&nbsp;&nbsp;<a href="#">[&gt;]</a></th>
            </tr>
            <tr wicket:id="hislis" title="regular" class="attdnRow attdnV">
            	<td wicket:id="hisDate" class="attdnDateV">01</td>
                <td wicket:id="hisName" class="attdnNameV">regular</td>
            </tr>
        </table>
   </div>
   </div>
   <!-- attendance history ends -->
                                    </div>
                                    <div id="attdTop">
                                        Search Student&nbsp;<input type="text" style="width:100px;" />&nbsp;&nbsp;<button type="submit" class="ui-state-default ui-corner-all es-button" style="margin-bottom: 4px;">search</button>
                                    </div>
                                </div>
                            </div>
                            <!-- fragment -->
                            <div wicket:id="attdlst">list goes here!</div>
                        </div>
                        
    <wicket:fragment wicket:id="attdPanel">
    	<form wicket:id="attdnForm">
                            <div style="margin:0px 10px; height:20px; vertical-align:bottom;">
                            	<div class="clearfix">
                                	<div style="float:left;">
                            			<div id="fillAtt" style="z-index:2; position:absolute; margin-left:25px;display:none;"></div>
                                    	<button class="es-button ui-corner-all ui-state-default">Fill Attendance</button>
                                    </div>
                                    <div style="float:left;">
                                    	<input name="attdnOn" wicket:id="attdnOn" type="hidden" value="" />
                                    	<div id="attdRun" style="display:none;">&nbsp;for <input wicket:id="attdnName" type="text" style="width:50px" value="className"/> on <span id="attdDate" style="font-weight:bold"></span>. <button wicket:id="attdSubm" class="es-button ui-corner-left ui-state-default">Attendance Taken</button><button id="attdCan" class="es-button ui-corner-right ui-state-default">Cancel</button></div>
                                     </div>
                                </div>
                             </div>
                            <div id="attdBot">
                            	<table id="attdTab">
                                	<tr>
                                    	<th style="width:20px;"  class="attdth">&nbsp;</th><th style="width:200px;" class="attdth">Student</th><th class="attdth" style="width:70px;">Attendence(%)</th><th style="width:160px;"  class="attdth">Last 10 classes</th><th style="width:25px;"  class="attdth">&nbsp;</th>
                                    </tr>
                                   <tr wicket:id="stdsRow">
                                    	<td class="attdtd cb"><input wicket:id="isPresent" style="display: none;" type="checkbox" /></td>
                                    	<td class="attdtd"><a wicket:id="attdName" href="#">Haadiya</a></td>
                                    	<td class="attdtd"><strong>80%</strong>&nbsp;[40/50]</td>
                                    	<td class="attdtd attdLst">p p p a p p a a a a</td>
                                    	<td>
   <div class="clearfix" style="display: none; position: absolute; margin-left: -190px;">
      <div class="outerAttdn" style="float:left;">
   		<table class="attdnTab">
        	<tr title="regular" class="attdnRow attdnP">
            	<td style="text-align:center;" colspan="3"><a href="#">[&lt;]</a> Dec 2011 <a href="#">[&gt;]</a></td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">01</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">P</td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">02</td>
                <td class="attdnName">lab</td>
                <td class="attdnMark">P</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">03</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">04</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">P</td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">05</td>
                <td class="attdnName">test</td>
                <td class="attdnMark">P</td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">06</td>
                <td class="attdnName">exam</td>
                <td class="attdnMark">P</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">07</td>
                <td class="attdnName">lab</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">08</td>
                <td class="attdnName">lab</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">09</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">10</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">11</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">12</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnA">
            	<td class="attdnDate">13</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">A</td>
            </tr>
            <tr title="regular" class="attdnRow attdnP">
            	<td class="attdnDate">14</td>
                <td class="attdnName">regular</td>
                <td class="attdnMark">P</td>
            </tr>
             
        </table>
   </div>
   <div style="float:left;"><strong>&gt;&gt;</strong></div>
</div>
<a id="newCal" href="#">detail</a></td>
                                    </tr>
                                </table>
                            </div>
        </form>
    </wicket:fragment>
                        
	</wicket:extend>
</body>
</html>